<template>
    <div class="app-container">
        <el-row style="margin-bottom:20px;">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="90px">
                    <my-form :form='queryParams' :options="queryParamsForm" style="float:left;"></my-form>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click='handleQuery(queryParams)' size="mini" >搜索</el-button>
                        <el-button icon="el-icon-refresh" @click='resetQuery()' size="mini">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:20px;">
            <el-col :span='4'>总入单数：{{num.totalNum}}</el-col>
            <el-col :span='4'>3999 订单数：{{num.num3999}}</el-col>
            <el-col :span='4'>4999 订单数：{{num.num4999}}</el-col>
            <el-col :span='4'>2万 订单数：{{num.num2w}}</el-col>
            <el-col :span='4'>3万 订单数：{{num.num3w}}</el-col>
            <el-col :span='4'>当前累计清分：{{num.totalBouns}}</el-col>
        </el-row>
        <el-row style="margin-bottom:20px;">
            <el-button-group>
                <el-button type="primary" :class="{selectBtn:currSelect == 1}" @click="btn(1)" plain>全部</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 2}" @click="btn(2)" plain>3999</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 3}" @click="btn(3)" plain>4999</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 4}" @click="btn(4)" plain>20000</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 5}" @click="btn(5)" plain>30000</el-button>
            </el-button-group>
        </el-row>
        <Table :list='list' :loading='loading' :tableColumns='tableColumns' ></Table>

        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="partnerOrderDetailsHander"  />
        
    </div>
</template>
<script>
import myForm from '@/views/components/myForm'
import Table from '@/views/components/myTable'
import { partnerOrderDetails,getOrderNum } from '@/api/ka/ka'
export default {
    components:{
        myForm,
        Table
    },
    data() {
        return{
            loading:false,
            queryParamsForm:[
                {title:'手机号',key:'mobile',type:'text',styleWidth:'240px'},
                
            ],
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            tableColumns:[
                {label:'ID',param:'id'},
                {label:'商品号',param:'infoGoodsId'},
                {label:'商品名称',param:'infoGoodsName',width:300},
                {label:'商品价格',param:'price'},
                {label:'订单号',param:'orderId'},
                {label:'入单时间',param:'orderTime'},
                {label:'下单人昵称',param:'nickName'},
                {label:'下单人手机号',param:'mobile'},
                {label:'清分金额',param:'money'},
                {label:'计入分红池',param:'id',
                    render: row => {
                        if(row.id){
                            return '成功'
                        }
                    }
                },
                {label:'创建日期',param:'createdAt',
                    render: row => {
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },
            ],
            list:[],
            total:0,
            currSelect:1,
            num:{
                num2w:0,
                num3w:0,
                num3999:0,
                num4999:0,
                totalNum:0,
                totalBouns:0,
            }
        }
    },
    created(){
        this.getOrderNumHander()
        this.partnerOrderDetailsHander()
    },
    methods:{
        //获取数量
        getOrderNumHander(){
            getOrderNum().then(res=>{
                if(res.code == 200){
                    this.num.num2w = res.num2w
                    this.num.num3w = res.num3w
                    this.num.num3999 = res.num3999
                    this.num.num4999 = res.num4999
                    this.num.totalNum = res.totalNum
                    this.num.totalBouns = res.totalBouns
                }
            })
        },
        //获取数据
        partnerOrderDetailsHander(data){
            data = this.addDateRange(this.queryParams)
            partnerOrderDetails(data).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        //搜索
        handleQuery(obj){
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.partnerOrderDetailsHander()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
            this.searchReset()
        },
        //清空搜索条件
        searchReset(){
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                mobile:'',
            }
        },
        //切换
        btn(val){
            let data = this.addDateRange(this.queryParams)
            if(val == 1){
                this.currSelect = 1
                delete data.price
            }else if(val == 2){
                this.currSelect = 2
                data.price = 3999
            }else if(val == 3){
                this.currSelect = 3
                data.price = 4999
            }else if(val == 4){
                this.currSelect = 4
                data.price = 20000
            }else if(val == 5){
                this.currSelect = 5
                data.price = 30000
            }
            this.partnerOrderDetailsHander(data)
            
        }
    }
}
</script>
<style scoped>
.selectBtn {
    background:#1890ff;
    color:#fff;
}
</style>
